<template>
    <div class="hm-header">
      <!-- 返回按钮绑定事件 -->
          <div class="left" @click="$emit('clickLeft')">&lt;</div>
          <div class="center">
            <!-- {{title}} -->
             <slot>默认标题</slot>
          </div>
          <!-- <div class="right" v-show="showRight">&gt;</div> -->
          <!-- <div class="right" showRight>搜索</div> -->
          <!-- 等效于 v-show="showRight" -->
           <slot name="right">搜索</slot>
    </div>
  </template>
  
  <script>
  export default {
    props:{
      title:{
        type:String,
        default:'默认标题'
      },
      showLeft:{
        type:Boolean,
        default:false
      }
    },
    mounted(){
      console.log(this.showRight+this.title);
    }
  }
  </script>
  
<style lang="less" scoped>
.hm-header{
height: 50px;
background-color: #4dacff;
border-bottom: 1px solid #000;
display: flex;
align-items: center;
padding: 0 10px;
justify-content: space-between;
.center{
  flex: 1;
  text-align: center;
}
}
</style>